<template>
    <div id="app">

    <mt-header  title="个人":fixed="is_fixed" >
        			<router-link to="/" slot="left">
        				<mt-button icon="back">返回</mt-button>
        			</router-link>
    </mt-header>

 <ul class="ui-list ui-border-tb">
       <li class="ui-border-t">
           <div class="ui-avatar">
           <el-upload
             class="avatar-uploader"
             action="https://jsonplaceholder.typicode.com/posts/"
             :show-file-list="false"
             :on-success="handleAvatarSuccess"
             :before-upload="beforeAvatarUpload">
             <img v-if="imageUrl" :src="imageUrl" class="avatar">
             <i v-else class="e"></i>
             <span><img slot="icon" src="../assets/user.jpg" width="60" height="60"></span>
           </el-upload>


           </div>
           <div class="ui-list-info">
               <h4 class="ui-nowrap">小小的情书</h4>
               <p class="ui-nowrap">简介;我的生活如此多娇，感叹世界的无常，事物的万般变化</p>
           </div>
       </li>
       <hr>
       <mt-navbar v-model="selected" class="c1">
         <mt-tab-item id="fs" @click.native="fensi">粉丝</mt-tab-item>
         <mt-tab-item id="gz" @click.native="fensi">关注</mt-tab-item>
       </mt-navbar>
   </ul>

     <div style="backround-color:">
 <ul class="ui-grid-halve">
     <li>
         <mt-tab-item @click.native="openMusic1">
             <span><img  src="../assets/6.jpg" width="240" height="100"></span>
         </mt-tab-item>
     </li>
     <li>
         <mt-tab-item @click.native="openMusic2">
             <span><img  src="../assets/7.jpg" width="240" height="100"></span>
         </mt-tab-item>
     </li>
     <li>
         <mt-tab-item @click.native="openMusic3">
             <span><img  src="../assets/8.jpg" width="240" height="100"></span>
         </mt-tab-item>
     </li>
     <li>
         <mt-tab-item @click.native="openMusic4">
             <span><img  src="../assets/40.png" width="220" height="100"></span>
        </mt-tab-item>
     </li>
     <li>
             <mt-tab-item @click.native="openMusic">
                 <span><img  src="../assets/43.png" width="240" height="100"></span>
             </mt-tab-item>
         </li>
         <li>
             <mt-tab-item @click.native="openMusic">
                 <span><img  src="../assets/44.png" width="240" height="100"></span>
             </mt-tab-item>
         </li>
         <li>
             <mt-tab-item @click.native="openMusic">
                 <span><img  src="../assets/45.png" width="240" height="100"></span>
             </mt-tab-item>
         </li>
         <li>
             <mt-tab-item @click.native="openMusic">
                 <span><img  src="../assets/46.png" width="240" height="100"></span>
             </mt-tab-item>
         </li>
 </ul>
 </div>

    <mt-tabbar v-model="selected" fixed>
       <mt-tab-item id="tab-container1" @click.native="openIndex">
        <img slot="icon" src="../assets/1.png">
         关注
       </mt-tab-item>
       <mt-tab-item id="tab-container2" @click.native="openMusic">
      <img slot="icon" src="../assets/2.png">
         发现
       </mt-tab-item>
        <mt-tab-item id="tab-container3" @click.native="openFa">
        <img slot="icon" src="../assets/5.png" width="80">
       </mt-tab-item>
       <mt-tab-item id="tab-container4" @click.native="openSinger">
        <img slot="icon" src="../assets/3.png">
         消息
       </mt-tab-item>
       <mt-tab-item id="tab-container5" @click.native="openUser">
        <img slot="icon" src="../assets/4.png">
         个人
       </mt-tab-item>
    </mt-tabbar>


    </div>
</template>
<script>
import Vue from 'vue'
import { Header } from 'mint-ui';
import { Button } from 'mint-ui';
import { TabContainer, TabContainerItem } from 'mint-ui';
import { Tabbar, TabItem } from 'mint-ui';
import { Cell } from 'mint-ui';

Vue.component('mt-tab-container', TabContainer);
Vue.component('mt-tab-container-item', TabContainerItem);
Vue.component('mt-tabbar', Tabbar);
Vue.component('mt-tab-item', TabItem);
Vue.component('mt-button', Button);
Vue.component('mt-header', Header);
Vue.component('mt-cell', Cell);



    export default {
        name:'app',
        data () {
            return {
                selected:'',
                is_fixed:true
            }
        },
                 methods:{
                 handleAvatarSuccess(res, file) {
                         this.imageUrl = URL.createObjectURL(file.raw);
                       },
                       beforeAvatarUpload(file) {
                         const isJPG = file.type === 'image/jpeg';
                         const isLt2M = file.size / 1024 / 1024 < 2;

                         if (!isJPG) {
                           this.$message.error('上传头像图片只能是 JPG 格式!');
                         }
                         if (!isLt2M) {
                           this.$message.error('上传头像图片大小不能超过 2MB!');
                         }
                         return isJPG && isLt2M;
                       },
                             fensi(){
                                   this.$router.push({
                                     path : '/fensi'
                                                     })
                                                     },
                             openIndex(){
                 	            this.$router.push({
                 	                path : '/index'
                 	            })
                 	        },
                 	        openMusic(){
                 	            this.$router.push({
                 	                path : '/music'
                 	            })
                 	        },
                 	        openSinger(){
                 	            this.$router.push({
                 	                path : '/singer'
                 	            })
                 	        },
                          openFa(){
                              this.$router.push({
                                  path : '/pai'
                              })
                          },
                 	        openUser(){
                                  this.$router.push({
                                     path : '/user'
                                 })
                              },
                                  openMusic1(){
                                       this.$router.push({
                                        path : '/music1'
                                         })
                                },
                                   openMusic2(){
                                    this.$router.push({
                                     path : '/music2'
                                  })
                             },
                              openMusic3(){
                             this.$router.push({
                              path : '/music3'
                              })
                           },
                               openMusic4(){
                                this.$router.push({
                                 path : '/music4'
                                })
                              }
                     	}

    }
</script>
<style>

.button{
top:24px;
left:5px;
}
.mt-cell{
text-align:left;
color:white;
}

</style>